<template>
   <view class="box">
      <view class="box__item" v-for="(item, index) in userList" :key="index">
         <view class="box__item__name">账号名称：{{ vk.pubfn.isNotNull(item.teamName) ? item.teamName : "未绑定公司" }}</view>
         <view class="box__item__time">
            <text>授权到期时间：</text>
            <zfy-countdown :targetTimestamp="item.expirationTime"></zfy-countdown>
         </view>
         <view class="box__item__meun">
            <el-button type="primary" @click="addTask(item)">添加任务</el-button>
            <el-button type="primary" @click="lookTask(item)">查看任务</el-button>
         </view>
      </view>
      <view style="height: 200rpx"></view>
      <view class="box__btn">
         <el-button type="primary" @click="addUser">添加账号</el-button>
      </view>
   </view>
</template>

<script>
   import { getUserList } from "@/api/http/myNodeIndex.js";
   export default {
      data() {
         return {
            userList: [],
            isShow: false,
         };
      },
      onShow() {
         if (this.isShow) {
            this.init();
         }
      },
      onHide() {
         this.isShow = true;
      },
      onLoad() {
         this.init();
      },
      methods: {
         init() {
            getUserList().then((res) => {
               this.userList = res.data;
            });
         },
         lookTask(item) {
            uni.navigateTo({
               url: "/pages/taskList/taskList?data=" + encodeURIComponent(JSON.stringify(item)),
            });
         },
         addUser() {
            uni.navigateTo({
               url: "/pages/index/index",
            });
         },
         addTask(item) {
            // 获取当前时间戳（秒级）
            const now = Math.floor(Date.now() / 1000);
            
            // 判断是否过期
            if (now >= item.expirationTime) {
               uni.showModal({
                  title: '提示',
                  content: '您的授权已过期，请重新添加账号',
                  showCancel: false,
                  success: () => {
                     uni.navigateTo({
                        url: "/pages/index/index",
                     });
                  }
               });
               return;
            }
            
            // 未过期则正常跳转
            uni.navigateTo({
               url: "/pages/robInfo/robInfo?id=" + item.id,
            });
         },
      },
   };
</script>

<style lang="scss" scoped>
   .box {
      width: 100%;
      min-height: 100vh;
      padding: 30rpx;
      background: linear-gradient(135deg, #f6f8fc, #f0f3f9);
      animation: gradientBG 15s ease infinite;
      
      @keyframes gradientBG {
         0% { background-position: 0% 50%; }
         50% { background-position: 100% 50%; }
         100% { background-position: 0% 50%; }
      }

      &__item {
         background-color: #ffffff;
         border: none;
         border-radius: 24rpx;
         padding: 40rpx;
         margin-bottom: 30rpx;
         box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.06);
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         overflow: hidden;
         animation: slideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
         animation-fill-mode: both;

         @for $i from 1 through 10 {
            &:nth-child(#{$i}) {
               animation-delay: #{$i * 0.1}s;
            }
         }

         @keyframes slideIn {
            from {
               opacity: 0;
               transform: translateY(30rpx);
            }
            to {
               opacity: 1;
               transform: translateY(0);
            }
         }

         &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 6rpx;
            height: 100%;
            background: linear-gradient(to bottom, $uni-theme-color, $uni-theme-color);
            border-radius: 6rpx;
            transition: all 0.3s ease;
         }

         &:hover {
            transform: translateY(-6rpx) scale(1.01);
            box-shadow: 0 12rpx 36rpx rgba($uni-theme-color, 0.15);

            &::before {
               width: 8rpx;
               box-shadow: 0 0 20rpx rgba($uni-theme-color, 0.4);
            }
         }

         &__name {
            font-size: 36rpx;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 24rpx;
            padding-left: 20rpx;
            letter-spacing: 1rpx;
            transition: all 0.3s ease;

            &:hover {
               color: $uni-theme-color;
               transform: translateX(4rpx);
            }
         }

         &__time {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            color: #606266;
            margin: 24rpx 0;
            padding: 20rpx;
            border-radius: 12rpx;
            background: rgba($uni-theme-color, 0.05);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;

            &:hover {
               background: rgba($uni-theme-color, 0.08);
               transform: translateX(4rpx);
            }

            text {
               margin-right: 12rpx;
               color: $uni-theme-color;
               font-weight: 500;
            }
         }

         &__meun {
            margin-top: 36rpx;
            display: flex;
            gap: 24rpx;
            padding: 0 20rpx;

            :deep(.el-button) {
               flex: 1;
               height: 88rpx;
               font-size: 30rpx;
               border-radius: 16rpx;
               font-weight: 500;
               letter-spacing: 2rpx;
               transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
               overflow: hidden;
               position: relative;
               
               &::before {
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 0;
                  height: 0;
                  background: rgba(255, 255, 255, 0.2);
                  border-radius: 50%;
                  transform: translate(-50%, -50%);
                  transition: width 0.6s ease, height 0.6s ease;
               }
               
               &:hover::before {
                  width: 300rpx;
                  height: 300rpx;
               }
               
               &.el-button--primary {
                  background: linear-gradient(135deg, $uni-theme-color, darken($uni-theme-color, 10%));
                  border: none;
                  box-shadow: 0 4rpx 12rpx rgba($uni-theme-color, 0.3);
                  
                  &:active {
                     transform: scale(0.96);
                     box-shadow: 0 2rpx 8rpx rgba($uni-theme-color, 0.2);
                  }

                  &:nth-child(2) {
                     background: linear-gradient(135deg, $uni-theme-color, darken($uni-theme-color, 10%));
                     box-shadow: 0 4rpx 12rpx rgba($uni-theme-color, 0.3);
                     
                     &:active {
                        box-shadow: 0 2rpx 8rpx rgba($uni-theme-color, 0.2);
                     }
                  }
               }
            }
         }
      }

      &__btn {
         position: fixed;
         left: 0;
         bottom: 0;
         padding: 30rpx;
         background-color: rgba(255, 255, 255, 0.9);
         backdrop-filter: blur(10px);
         width: 100%;
         text-align: center;
         box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
         animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);

         @keyframes slideUp {
            from {
               transform: translateY(100%);
            }
            to {
               transform: translateY(0);
            }
         }

         :deep(.el-button) {
            width: 90%;
            height: 96rpx;
            font-size: 34rpx;
            border-radius: 48rpx;
            background: linear-gradient(135deg, #A5864D, #3a8ee6);
            border: none;
            font-weight: 600;
            letter-spacing: 4rpx;
            box-shadow: 0 6rpx 20rpx rgba(64, 158, 255, 0.3);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            
            &::before {
               content: '';
               position: absolute;
               top: 50%;
               left: 50%;
               width: 0;
               height: 0;
               background: rgba(255, 255, 255, 0.2);
               border-radius: 50%;
               transform: translate(-50%, -50%);
               transition: width 0.6s ease, height 0.6s ease;
            }
            
            &:hover {
               transform: translateY(-4rpx);
               box-shadow: 0 8rpx 24rpx rgba(64, 158, 255, 0.4);
               
               &::before {
                  width: 400rpx;
                  height: 400rpx;
               }
            }
            
            &:active {
               transform: scale(0.98);
               box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.2);
            }
         }
      }
   }
</style>
